<!doctype html>
<html><!-- InstanceBegin template="/Templates/dwt.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>谋刻职业教育在线测评与学习平台</title>
<link rel="stylesheet" href="css/course.css"/>
<link rel="stylesheet" href="css/tab.css" media="screen">
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.tabs.js"></script>
<script src="js/mine.js"></script>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->

</head>

<body>
<div class="coursecont"  id="app">
<div class="head" id="fixed">
	<div class="nav">
    	<span class="navimg"><a href="index.html"><img border="0" src="images/logo.png"></a></span>
        <ul class="nag">
        	<li><a href="courselist.html" class="link1 current">课程</a></li>
            <li><a href="articlelist.html" class="link1">资讯</a></li>
            <li><a href="teacherList.html" class="link1">讲师</a></li>
            <li><a href="exam_index.html" class="link1" target="_blank">题库</a></li>
            <li><a href="askarea.html" class="link1" target="_blank">问答</a></li>

        </ul>
        <span class="massage">
            <!--<span class="select">
        	<a href="#" class="sort">课程</a>
        	<input type="text" value="关键字"/>
            <a href="#" class="sellink"></a>
            <span class="sortext">
            	<p>课程</p>
                <p>题库</p>
                <p>讲师</p>
            </span>
        </span>-->{{loginUser}}
            <a v-if="userFlag" href="login.html" class="link2 he">登录</a>
            <a v-if="userFlag" href="register.html" class="link2 he">注册</a>
            <a v-if="!userFlag" href="login.html" class="link2 he">退出</a>
            <a href="mycourse.html" style="width:70px" class="link2 he ico" target="_blank">个人中心</a>
        </span>
    </div>
</div>
<!-- InstanceBeginEditable name="EditRegion1" -->
<div class="coursecont">
    <div class="courseleft">
	<span class="select">
      <input type="text" value="请输入关键字" v-model="eduCourse.courseName" class="pingjia_con" />
      <a class="sellink" @click="list()"></a>
    </span>
    <ul class="courseul">
    <li class="curr" @click="clearData()" style="border-radius:3px 3px 0 0;background:#fb5e55;"><h3 style="color:#fff;"><a href="#" class="whitea">全部课程</a></h3>
    <li  v-for="item1 in parentlist">
    <h4>{{item1.childName}}</h4>
        <ul class="sortul" v-for="item2 in item1.children">
        <li ><a @click="setCId(item2.id)">{{item2.childName}}</a></li>
        </ul>
    <div class="clearh"></div>
    </li>
    </ul>
    <div style="height:20px;border-radius:0 0 5px 5px; background:#fff;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)"></div>
    </div>
    <div class="courseright">
        <div class="clearh"></div>
      <ul class="courseulr">
        <li v-for="item in goodlist">
        	<div class="courselist">
            <a @click= "toHtml(item.courseId)" target="_blank"><img style="border-radius:3px 3px 0 0;" width="240"  :title="item.courseName" :src="'/api/education-course/base/download/'+item.courseLogo"></a>

            <p class="courTit"><a @click= "toHtml(item.courseId)" v-html="item.courseName" target="_blank">{{item.courseName}}</a></p>
            <div class="gray">
            <span>{{item.courseHours}}课时 {{item.courseHours*20}}分钟</span>
            <span class="sp1">{{item.studentsNumber}}人学习</span>
            <div style="clear:both"></div>
            </div>
            </div>
       </li>
    </ul>

    </div>

    <div class="clearh"></div>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</div>
<!-- InstanceEndEditable -->
</div>

<div class="clearh"></div>
<div class="foot">
<div class="fcontainer">
      <div class="fwxwb">
	       <div class="fwxwb_1">
		       <span>关注微信</span><img width="95" alt="" src="images/num.png">
		   </div>
           <div>
               <span>关注微博</span><img width="95" alt="" src="images/wb.png">
		   </div>
      </div>
      <div class="fmenu">
	     <p><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">优秀讲师</a> | <a href="#">帮助中心</a> | <a href="#">意见反馈</a> | <a href="#">加入我们</a></p>
      </div>
      <div class="copyright">
        <div><a href="/">谋刻网</a>所有&nbsp;晋ICP备12006957号-9</div>
      </div>
    </div>
</div>
<!--右侧浮动-->
<div class="rmbar">
	<span class="barico qq" style="position:relative">
	<div  class="showqq">
	   <p>官方客服QQ:<br>335049335</p>
	</div>
	</span>
	<span class="barico em" style="position:relative">
	  <img src="images/num.png" width="75" class="showem">
	</span>
	<span class="barico wb" style="position:relative">
	  <img src="images/wb.png" width="75" class="showwb">
	</span>
	<span class="barico top" id="top">置顶</span>
</div>
</body>
<!-- InstanceEnd --></html>

<script src="js/axios.min.js"></script>
<script src="js/moment.js"></script>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue，  后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
	new Vue({
		el:"#app",
		data:{
            goodlist:[],
			parentlist:[{"childName":"云计算","children":[{"childName":"JAVA基础","id":21,"parentId":20,"sort":0}],"id":20,"parentId":0,"sort":10},{"childName":"外语考试","children":[{"childName":"专业六级","id":10,"parentId":2,"sort":0},{"childName":"专业四级","id":9,"parentId":2,"sort":0}],"id":2,"parentId":0,"sort":5},{"childName":"操作系统","children":[{"childName":"Windows","id":12,"parentId":4,"sort":0}],"id":4,"parentId":0,"sort":5},{"childName":"数据库","children":[{"childName":"ORACLE","id":17,"parentId":1,"sort":1},{"childName":"MYSQL","id":8,"parentId":1,"sort":0}],"id":1,"parentId":0,"sort":4},{"childName":"公务员","children":[{"childName":"面试","id":15,"parentId":7,"sort":1},{"childName":"行测","id":16,"parentId":7,"sort":0}],"id":7,"parentId":0,"sort":0},{"childName":"移动开发","children":[{"childName":"移动通信","id":11,"parentId":6,"sort":0}],"id":6,"parentId":0,"sort":0},{"childName":"教师资格证","children":[{"childName":"小学","id":13,"parentId":5,"sort":1},{"childName":"初中","id":14,"parentId":5,"sort":0}],"id":5,"parentId":0,"sort":0}],
            eduCourse:{},
            page:0,
            size:6,
            total:0,
            user:{},
            loginUser:'',
            userFlag:true
		},
         methods:{
            list:function () {
                axios.post("/api/education-course/base/esList/"+this.size+"/"+this.page,this.eduCourse).then(
                    (res)=>{
                        if(res.data.result!=null){
                            this.goodlist=res.data.result.content;
                            this.total=res.data.result.totalElements;
                        }else {
                            this.$message("不好意思 没有您要查询的结果!")
                        }
                        //this.findparent();
                    }
                );
            },
            /*findparent:function () {
                axios.get("/api/education-course/category/getTree").then(
                    (res)=>{
                        this.parentlist=res.data.result;
                    }
                );
            },*/
            toHtml:function(id){
                location.href="/course/"+id+".html";
            },
             setCId:function (id) {
                 this.eduCourse.categoryChildId=id;
                 this.list();
             },
             clearData:function () {
                 this.eduCourse={};
                 this.list();
             },
             handleSizeChange:function (val) {
                 this.size=val;
                 this.list();
             },
             handleCurrentChange:function (val) {
                 this.page=val-1;
                 this.list();
             },
        },
		mounted(){
            this.user = JSON.parse(sessionStorage.getItem("user"));
            if(this.user!=null){
                this.userFlag=false;
                this.loginUser='欢迎:'+this.user.showName;
            }
            this.list();
		}
	});
</script>
